<template>
   <!-- 返回上一个页面 -->
    <van-nav-bar
    title="我的收货地址"
    left-text="返回"
    left-arrow
    @click-left="back"
    />

    <!-- 从确认订单点击的 -->
    <van-address-list
        v-if="action=='order'"
        v-model="AddressDefault"
        :list="AddressList"
        default-tag-text="默认"
        switchable
        @add="add"
        @select="order"
        @edit="edit"
    />
<!-- 地址 v-model当前选中的地址，里面放的是默认选择的id， -->
    <!-- 从会员中心点击的 -->
    <van-address-list
         v-else
        v-model="AddressDefault"
        :list="AddressList"
        default-tag-text="默认"
        switchable
        @add="add"
        @select="select"
        @edit="edit"
    />
</template>

<script>

export default {
    // 名字
    name:'AddressIndex',
    // 页面显示前，利用生命周期钩子函数，获取到地址列表
    created() {
        // 调用自身里面的收获地址this指的是最大组件
        this.AddressData()//通过钩子，在页面创建前，拿到数据

         // 接收confirm传过来的参数
        this.action=this.$route.query.action ? this.$route.query.action : ''
        // console.log(this.action);

    },
    data()
    {
        return{
            LoginUser:this.$cookies.get('LoginUser'),
            // 设置地址列表
            AddressList:[],
            AddressDefault:0,//默认选择地址id

            action:'',//接收cart.order界面传过来的值
        }
    }, 
    methods: {
        back()
        {
            this.$router.go(-1)
        },
        // 在页面显示之前就要拿到地址（生命周期）(封装接口请求)获取收获地址列表
        async AddressData()
        {
            // 1、调用接口、传参
            var result= await this.$api.AddressIndex({userid: this.LoginUser.id})
            // console.log(result.data);
            // return false

            var data=result.data
            var list=[]

            if(data.length <=0)
            {
                this.$notify({
                    title:'提示信息',
                    massage:'暂无收获地址'
                })
            }

            // 找出默认的地址
            for(var item of data)
            {
                if(item.status==1)
                {
                    this.AddressDefault=item.id
                }

                // 重新组装数据（根据插件组装）

                var address={
                    id:item.id,
                    name:item.consignee,
                    tel:item.mobile,
                    address:`${item.region_text}`,
                    isDefault:item.status==1 ? true : false
                }

                // console.log(address);

                list.push(address);//追加数组元素
            }

            // 覆盖data熟悉
            this.AddressList=list

            
        },
        add()
        {
            this.$router.push('/user/address/add')

        },

        // 编辑
        edit(address)
        {
            
            var addrid=address.id
            // 跳转(并且还要把id 一起带过去)
            this.$router.push({path:'/user/address/edit',query:{addrid:addrid}})

        },

        // 切换，说明状态发送改变，所有数据库也发送改变，所以前台要掉接口，后台要建立接口，更新数据库
        async select(item)
        {
            var addrid=item.id ? item.id : 0

            // 组装数据
            var data={
                userid:this.LoginUser.id,
                addrid:addrid,
            }

            // 调用接口
            var result=await this.$api.AddressCheck(data)

            // 重新调用一次请求列表的方法
            this.AddressData();
            
        },

        //从确认订单过来的，选择指定地址(地址切换到了，数据库也要改变，所以要重新组装数据)
        async order(item)
        {
            // console.log(item);
            // 根据传过来时的数据结构组装
            var data={
                id:item.id,
                consignee:item.name,
                region_text:item.address,
                mobile:item.tel,
            }

            // 存放在cookies(address存放的字段，)
            this.$cookies.set('address',data)
            // 退回(到confirm的钩子里面进行判断)
            this.$router.go(-1)
            
            
        }
    }
}
</script>
